---
name: Icon
route: /Icon
order: 7
sidebar: true
---

import { Playground } from 'docz'
import Icon from './index'
// let { FaBeer } = Icon

# Icon

### Icon组件介绍及使用方法
icon图标库笔者采用的比较有名的Font Awesome， 基于其进行的二次封装，具体使用如下：
<Playground>
    <Icon type="FaBeer" size="24px" style={{marginLeft: '15px'}} />
    <Icon type="FaAccessibleIcon" size="24px" style={{marginLeft: '15px'}} />
    <Icon type="FaAlipay" size="24px" style={{marginLeft: '15px'}} />
    <Icon type="FaAngellist" size="24px" style={{marginLeft: '15px'}} />
    <Icon type="FaAtlassian" size="24px" style={{marginLeft: '15px'}} />
    <Icon type="FaBitbucket" size="24px" style={{marginLeft: '15px'}} />
    <Icon type="FaDropbox" size="24px" style={{marginLeft: '15px'}} />
    <Icon type="FaFreebsd" size="24px" style={{marginLeft: '15px'}} />
    <Icon type="FaGithub" size="24px" style={{marginLeft: '15px'}} />
    <Icon type="FaHackerNewsSquare" size="24px" style={{marginLeft: '15px'}} />
    <Icon type="FaHotjar" size="24px" style={{marginLeft: '15px', color: 'red'}} />
</Playground>

## 基本代码如下
``` js
import { Icon } from '@xlab/xu_ui'

// 使用
<Icon type="FaBeer" />
<Icon type="FaAccessibleIcon" size="24px" />
<Icon type="FaAlipay" size="24px" style={{color: 'red'}} />
```


#### 更多图标可以在如下界面获得
<Playground>
    <iframe width="100%" height="1000px" style={{border: 'none'}} src="https://react-icons.netlify.com/#/icons/fa" />
</Playground>

## API文档
|  参数  |  说明  |  类型  |  默认值  |
|  ---   |  ---  |  ---  |  ---  |
|  type  |  icon类型  |  string  |  |
|  size  |  icon大小(px，lg，xs)  |  string  |  |
|  rotation  |  旋转角度  |  number  |  |
|  style  |  图标样式  |  object  |  |


